//**
// * clearfix
// * @author 飞长 <veryued@gmail.com>
// */

.clearfix() {
  *zoom: 1;
  &:before,
  &:after {
    display: table;
    content: "";
    // Fixes Opera/contenteditable bug:
    // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
    line-height: 0;
  }
  &:after {
    clear: both;
  }
}
//**
// * background-clip 背景覆盖的位置
// * @params  [ border-box || padding-box || content-box]
// * @author 飞长 <veryued@gmail.com>
// */

.background-clip(@background-clip: border-box){
	-moz-background-clip: @background-clip;
	  -webkit-background-clip: @background-clip;
		background-clip: @background-clip;
}
//**
// * background-origin 背景开始的位置
// * @params	[padding-box | border-box | content-box][, [border-box | padding-box | content-box]]*
// * @author	飞长 <veryued@gmail.com>
// */

.background-origin(@background-origin: padding-box){
	-moz-background-origin: @background-origin;
	  -webkit-background-origin: @background-origin;
	    background-origin: @background-origin;
}
//**
// * background-size 背景尺寸
// * @params	[ [ <length> | <percentage> | auto ]{1,2} | cover | contain ]#
// * @author	飞长 <veryued@gmail.com>
// */

.background-size(@background-size: auto){
	-moz-background-size: @background-size;
	  -webkit-background-size: @background-size;
	    -o-background-size: @background-size;
	      background-size: @background-size;
}

//**
// * border-image
// * @params <'border-image-source'> || <'border-image-slice'> 
// * [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]? || <'border-image-repeat'>
// * @author 飞长 <veryued@gmail.com>
// * 存在问题
// */

.border-image(@url, @width, @repeat){
	border: '@{width} solid transparent';
      -moz-border-image:'url(@{url}) @width @width @repeat'; 
    	-webkit-border-image:'url(@{url}) @width @width @repeat'; 
    	  -o-border-image:'url(@{url}) @width @width @repeat'; 
    		border-image:'url(@{url}) @width @width @repeat';
}
//**
// * border-radius
// * @author 飞长 <veryued@gmail.com>
// */

.border-radius(@radius: 5px) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}

//单角
.border-top-left-radius(@radius: 5px) {
  -webkit-border-top-left-radius: @radius;
      -moz-border-radius-topleft: @radius;
          border-top-left-radius: @radius;
}
.border-top-right-radius(@radius: 5px) {
  -webkit-border-top-right-radius: @radius;
      -moz-border-radius-topright: @radius;
          border-top-right-radius: @radius;
}
.border-bottom-right-radius(@radius: 5px) {
  -webkit-border-bottom-right-radius: @radius;
      -moz-border-radius-bottomright: @radius;
          border-bottom-right-radius: @radius;
}
.border-bottom-left-radius(@radius: 5px) {
  -webkit-border-bottom-left-radius: @radius;
      -moz-border-radius-bottomleft: @radius;
          border-bottom-left-radius: @radius;
}

//单边
.border-top-radius(@radius: 5px) {
  .border-top-right-radius(@radius);
  .border-top-left-radius(@radius);
}
.border-right-radius(@radius: 5px) {
  .border-top-right-radius(@radius);
  .border-bottom-right-radius(@radius);
}
.border-bottom-radius(@radius: 5px) {
  .border-bottom-right-radius(@radius);
  .border-bottom-left-radius(@radius);
}
.border-left-radius(@radius: 5px) {
  .border-top-left-radius(@radius);
  .border-bottom-left-radius(@radius);
}
//**
// * border-shadow
// * @params	none | [inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]#
// *          none | [内映射? && [横向平移 纵向平移 模糊? 扩散? 颜色?]]#
// * @author 飞长 <veryued@gmail.com>
// */

.box-shadow(@shadow: 5px 5px 10px #cccccc) {
  -webkit-box-shadow: @shadow;
     -moz-box-shadow: @shadow;
          box-shadow: @shadow;
}

//**
// * box-sizing 盒模型计算方式
// * @params	content-box padding-box border-box       
// * @author	飞长 <veryued@gmail.com>
// */

.box-sizing(@boxmodel) {
  -webkit-box-sizing: @boxmodel;
     -moz-box-sizing: @boxmodel;
          box-sizing: @boxmodel;
}
//**
// * column-count
// * @type {[type]}
// * @author 飞长 <veryued@gmail.com>
// */
.content-columns(@columnCount, @columnGap: @gridGutterWidth) {
  -webkit-column-count: @columnCount;
     -moz-column-count: @columnCount;
          column-count: @columnCount;
  -webkit-column-gap: @columnGap;
     -moz-column-gap: @columnGap;
          column-gap: @columnGap;
}
//**
// * font-face 自定义字体
// * @params	@path: 字体路径; @font-name: 字体名字; 需要同时存在eot woff ttf svg
// * @author 飞长 <veryued@gmail.com>
// */

.font-face(@path, @font-name){
	@font-face{
		font-family: @font-name;
		src: url('@path/@{font-name}.eot'); /* IE9 Compat Modes */
		src: url('@path/@{font-name}.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		     url('@path/@{font-name}.woff') format('woff'), /* Modern Browsers */
		     url('@path/@{font-name}.ttf')  format('truetype'), /* Safari, Android, iOS */
		     url('@path/@{font-name}.svg#svgFontName') format('svg'); /* Legacy iOS */
	}
}

//**
// * hyphens
// * @author 飞长 <veryued@gmail.com>
// * 可能存在问题
// */

.hyphens(@mode: auto) {
  word-wrap: break-word;
  -webkit-hyphens: @mode;
     -moz-hyphens: @mode;
      -ms-hyphens: @mode;
       -o-hyphens: @mode;
          hyphens: @mode;
}
.word-break(@word-break){
  -ms-word-break: @word-break;
    word-break: @word-break;
}
.hyphenation(){
  .word-break(break-all);
  .hyphens();
}
//**
// * opacity
// * @author 飞长 <veryued@gmail.com>
// */

.opacity(@opacity: 80) {
  opacity: @opacity / 100;
  filter: ~"alpha(opacity=@{opacity})";
}
//**
// * resize
// * @params	horizontal, vertical, both
// * @author	飞长 <veryued@gmail.com>
// */

.resizable(@direction) {
  resize: @direction;
  overflow: auto; // Safari fix
}
//**
// * text-shadow
// * @params	[ <color>? <offset-x> <offset-y> <blur-radius>? | <offset-x> <offset-y> <blur-radius>? <color>? ]
// *         采用第一种参数方式，并不支持多重阴影
// * @author 飞长 <veryued@gmail.com>
//*/

.text-shadow(@color, @x, @y, @blur){
	text-shadow: '@{color} @{x} @{y} @{blur}';
}
//**
// * transformation 
// * @params  
// * @author  飞长 <veryued@gmail.com>
// */

//**
// * transform: none
// * transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0)
// * transform: translate(12px, 50%)
// * transform: translateX(2em)
// * transform: translateY(3in)
// * transform: scale(2, 0.5)
// * transform: scaleX(2)
// * transform: scaleY(0.5)
// * transform: rotate(0.5turn)
// * transform: skewX(30deg)
// * transform: skewY(1.07rad)
// * transform: matrix3d(1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0, 10.0, 11.0, 12.0, 13.0, 14.0, 15.0, 16.0)
// * transform: translate3d(12px, 50%, 3em)
// * transform: translateZ(2px)
// * transform: scale3d(2.5, 1.2, 0.3)
// * transform: scaleZ(0.3)
// * transform: rotate3d(1, 2.0, 3.0, 10deg)
// * transform: rotateX(10deg)
// * transform: rotateY(10deg)
// * transform: rotateZ(10deg)
// * transform: perspective(17px)
// * transform: translateX(10px) rotate(10deg) translateY(5px)
// */

// 旋转
.rotate(@degress) {
  -webkit-transform: scale(@degress);
     -moz-transform: scale(@degress);
      -ms-transform: scale(@degress);
       -o-transform: scale(@degress);
          transform: scale(@degress);
}
.rotate3d(@x, @y, @z, @degress){
  -webkit-transform: rotate3d(@x, @y, @z, @degress);
     -moz-transform: rotate3d(@x, @y, @z, @degress);
      -ms-transform: rotate3d(@x, @y, @z, @degress);
       -o-transform: rotate3d(@x, @y, @z, @degress);
          transform: rotate3d(@x, @y, @z, @degress);
}
.rotateX(@degress){
  -webkit-transform: rotateX(@degrees);
     -moz-transform: rotateX(@degrees);
      -ms-transform: rotateX(@degrees);
       -o-transform: rotateX(@degrees);
          transform: rotateX(@degrees);
}
.rotateY(@degress){
  -webkit-transform: rotateY(@degrees);
     -moz-transform: rotateY(@degrees);
      -ms-transform: rotateY(@degrees);
       -o-transform: rotateY(@degrees);
          transform: rotateY(@degrees);
}
.rotateZ(@degress){
  -webkit-transform: rotateZ(@degrees);
     -moz-transform: rotateZ(@degrees);
      -ms-transform: rotateZ(@degrees);
       -o-transform: rotateZ(@degrees);
          transform: rotateZ(@degrees);
}


//缩放
.scale(@ratio) {
  -webkit-transform: scale(@ratio);
     -moz-transform: scale(@ratio);
      -ms-transform: scale(@ratio);
       -o-transform: scale(@ratio);
          transform: scale(@ratio);
}
.scaleX(@ratio) {
  -webkit-transform: scaleX(@ratio);
     -moz-transform: scaleX(@ratio);
      -ms-transform: scaleX(@ratio);
       -o-transform: scaleX(@ratio);
          transform: scaleX(@ratio);
}
.scaleY(@ratio) {
  -webkit-transform: scaleY(@ratio);
     -moz-transform: scaleY(@ratio);
      -ms-transform: scaleY(@ratio);
       -o-transform: scaleY(@ratio);
          transform: scaleY(@ratio);
}

//重定位元素
.translate(@x, @y) {
  -webkit-transform: translate(@x, @y);
     -moz-transform: translate(@x, @y);
      -ms-transform: translate(@x, @y);
       -o-transform: translate(@x, @y);
          transform: translate(@x, @y);
}
.translate3d(@x, @y, @z) {
  -webkit-transform: translate3d(@x, @y, @z);
     -moz-transform: translate3d(@x, @y, @z);
       -o-transform: translate3d(@x, @y, @z);
          transform: translate3d(@x, @y, @z);
}
.translateX(@x){
  -webkit-transform: translateX(@x);
     -moz-transform: translateX(@x);
      -ms-transform: translateX(@x);
       -o-transform: translateX(@x);
          transform: translateX(@x);
}
.translateY(@y){
  -webkit-transform: translateY(@y);
     -moz-transform: translateY(@y);
      -ms-transform: translateY(@y);
       -o-transform: translateY(@y);
          transform: translateY(@y);
}
.translateZ(@z){
  -webkit-transform: translateZ(@z);
     -moz-transform: translateZ(@z);
      -ms-transform: translateZ(@z);
       -o-transform: translateZ(@z);
          transform: translateZ(@z);
}

//倾斜
.skew(@x, @y) {
  -webkit-transform: skew(@x, @y);
     -moz-transform: skew(@x, @y);
      -ms-transform: skewX(@x) skewY(@y); 
       -o-transform: skew(@x, @y);
          transform: skew(@x, @y);
  -webkit-backface-visibility: hidden;
}
.skewX(@x) {
  -webkit-transform: skewX(@x);
     -moz-transform: skewX(@x);
      -ms-transform: skewX(@x);
       -o-transform: skewX(@x);
          transform: skewX(@x);
  -webkit-backface-visibility: hidden;
  //Webkit gives a pixelated edge. This can be resolved by adding the following line to the mixin. -webkit-backface-visibility: hidden;
}
.skewY(@y) {
  -webkit-transform: skewY(@y);
     -moz-transform: skewY(@y);
      -ms-transform: skewY(@y); 
       -o-transform: skewY(@y);
          transform: skewY(@y);
  -webkit-backface-visibility: hidden;
}

//**
// * transition
// * @params  [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> 
// *              [, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]*
// * 详细可以查看 http://www.w3.org/TR/css3-transitions/
// * @author 飞长 <veryued@gmail.com>
// */


.transition(@transition) {
  -webkit-transition: @transition;
    -moz-transition: @transition;
       -o-transition: @transition;
          transition: @transition;
}

//**
// * 延迟时间
// * @type {time} 如0s
// */
.transition-delay(@transition-delay: 0s) {
  -webkit-transition-delay: @transition-delay;
     -moz-transition-delay: @transition-delay;
       -o-transition-delay: @transition-delay;
          transition-delay: @transition-delay;
}

//**
// * 持续时间
// * @type {time} 如0s
// */
.transition-duration(@transition-duration: 0s){
	-webkit-transition-delay: @transition-duration;
     -moz-transition-delay: @transition-duration;
       -o-transition-delay: @transition-duration;
          transition-delay: @transition-duration;
}

//**
// * 需要transition的属性
// * @type: {css-property}
// */
.transition-property(@transition-property){
  -webkit-transition-delay: @transition-property;
     -moz-transition-delay: @transition-property;
       -o-transition-delay: @transition-property;
          transition-delay: @transition-property;
}

//**
// * 时间函数
// * @param  {
// *         [ ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | 
// *         steps(<integer>[, [ start | end ] ]?) | cubic-bezier(<number>, <number>, <number>, <number>) ] 
// *         [, [ ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | 
// *         steps(<number>[, [ start | end ] ]?) | cubic-bezier(<number>, <number>, <number>, <number>) ] ]*
// * } 
// * @transition-timing: ease          [description]
// */
.transition-timing-function(@transition-timing: ease){
	-webkit-transition-delay: @transition-timing;
     -moz-transition-delay: @transition-timing;
       -o-transition-delay: @transition-timing;
          transition-delay: @transition-timing;
}


//**
// * user-select
// * @params	none | text | all | element
// * @author 飞长 <veryued@gmail.com>
//*/

.user-select(@select) {
  -webkit-user-select: @select;
     -moz-user-select: @select;
      -ms-user-select: @select;
       -o-user-select: @select;
          user-select: @select;
}
//**
// * 
// * Grid Layout
// * 
// * @author 飞长 <veryued@gmail.com>
// * 
// */


.makeGrid(@colnum: 24, @colwidth: 30px, @margin: 10px){
  
  @gridColumns:             @colnum;
  @gridColumnWidth:         @colwidth;
  @gridGutterWidth:         @margin;
  @gridRowWidth:            (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));


  .gridX (@gridColumnWidth, @gridGutterWidth) {
    .spanX (@index) when (@index > 0) {
      (~".span@{index}") { .span(@index); }
      .spanX(@index - 1);
    }
    .spanX (0) {}

    .offsetX (@index) when (@index > 0) {
      (~".offset@{index}") { .offset(@index); }
      .offsetX(@index - 1);
    }
    .offsetX (0) {}

    .offset (@columns) {
      margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns + 1));
    }

    .span (@columns) {
      width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
    }

    .row {
      margin-left: @gridGutterWidth * -1;
      .clearfix();
    }

    .span{
      float: left;
      min-height: 1px; // prevent collapsing columns
      margin-left: @gridGutterWidth;
    }

    // generate .spanX and .offsetX
    .spanX (@gridColumns);
    .offsetX (@gridColumns);

  }
  .grid{
    .gridX(@gridColumnWidth, @gridGutterWidth);
  }

}

//**
// * 
// * Fluid Layout
// * 
// * @author 飞长 <veryued@gmail.com>
// * 
// */


.makeFluid(@colnum: 24, @colwidth: 30px, @margin: 10px){
  @gridColumns:             @colnum;
  @gridColumnWidth:         @colwidth;
  @gridGutterWidth:         @margin;
  @gridRowWidth:            (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
  @fluidGridColumnWidth:    percentage(@gridColumnWidth/@gridRowWidth);
  @fluidGridGutterWidth:    percentage(@gridGutterWidth/@gridRowWidth);
  .fluid (@fluidGridColumnWidth, @fluidGridGutterWidth) {

    .spanX (@index) when (@index > 0) {
      (~".span@{index}") { .span(@index); }
      .spanX(@index - 1);
    }
    .spanX (0) {}

    .offsetX (@index) when (@index > 0) {
      (~'.offset@{index}') { .offset(@index); }
      (~'.offset@{index}:first-child') { .offsetFirstChild(@index); }
      .offsetX(@index - 1);
    }
    .offsetX (0) {}

    .offset (@columns) {
      margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) + (@fluidGridGutterWidth*2);
      *margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%) + (@fluidGridGutterWidth*2) - (.5 / @gridRowWidth * 100 * 1%);
    }

    .offsetFirstChild (@columns) {
      margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) + (@fluidGridGutterWidth);
      *margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%) + @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%);
    }

    .span (@columns) {
      width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1));
      *width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%);
    }

    .row-fluid {
      width: 100%;
      .clearfix();
      .span {
        float: left;
        margin-left: @fluidGridGutterWidth;
        *margin-left: @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%);
      }
      .first-child {
        margin-left: 0;
      }

      // Space grid-sized controls properly if multiple per line
      .controls-row [class*="span"] + [class*="span"] {
        margin-left: @fluidGridGutterWidth;
      }

      // generate .spanX and .offsetX
      .spanX (@gridColumns);
      .offsetX (@gridColumns);
    }
  }

  .fluid{
    .fluid (@fluidGridColumnWidth, @fluidGridGutterWidth);
  }
}
//**
// *
// * Metro Layout
// * 
// * @author 飞长 <veryued@gmail.com>
// * 
// */
.makeMetro(@colnum: 6, @colwidth: 150px, @margin: 10px){
  
  @gridColumns:             @colnum;
  @gridColumnWidth:         @colwidth;
  @gridGutterWidth:         @margin;
  @gridRowWidth:            (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));


  .metroX (@gridColumnWidth, @gridGutterWidth) {
    .spanX (@index) when (@index > 0) {
      (~".span@{index}") { .span(@index); }
      .spanX(@index - 1);
    }
    .spanX (0) {}
    .lineX (@index) when (@index > 0) {
      (~".line@{index}") { .line(@index); }
      .lineX(@index - 1);
    }
    .lineX (0) {}

    .offsetX (@index) when (@index > 0) {
      (~".offset@{index}") { .offset(@index); }
      .offsetX(@index - 1);
    }
    .offsetX (0) {}

    .offset (@columns) {
      margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns + 1));
    }

    .span (@columns) {
      width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
    }
    .line (@columns){
      height: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
      margin-bottom: @margin;
    }

    .row {
      margin-left: @gridGutterWidth * -1;
      .clearfix();
    }

    .span{
      float: left;
      min-height: 1px; // prevent collapsing columns
      margin-left: @gridGutterWidth;
    }

    // generate .spanX and .offsetX
    .spanX (@gridColumns);
    .lineX (@gridColumns);
    .offsetX (@gridColumns);

  }
  .metro{
    .metroX(@gridColumnWidth, @gridGutterWidth);
  }

}
